<!-- 
	组件属性：（ props ）
		image:组件存储操作的图片对象，
		maxlength:当前组件上传数限制，0 表示不限制上传数（默认），否则为限制为传入参数的值
		isOne:上传的图片是否占据全部组件大小，默认 false 表示宽度占据整行高度自增长，否则将跟组件宽高一致
		isShowDel：是否显示删除按钮
		zcId：用于区分多个组件同时存在的唯一标识，默认为0，页面中只存在一个该组件则可以忽略
		isDisabled:	是都禁止上传 ，默认 false  可上传
 
 -->



<template>
	<view>
		<view class="card_img uni-flex zcFlex_row">
			<block v-for="(imgs,idx) in image.images" :key="idx">
				<view v-if="imgs.url" :style="{'width':isOne?'98%':'46%'}" style="height: 220upx;" >
					<image :src="imgs.url" mode="aspectFit" @tap="pvImages(image.images,idx)"></image>
					<view v-show="isShowDel" :data-id="zcId" class="imgfont icon-unie6b4 card_removeImg" @tap="rmImages(idx,zcId)"></view>
				</view>
			</block>
			<view :style="{'width':isOne?'98%':'46%'}" style="height: 220upx;" @tap="upImages(image,isDisabled)" v-if="maxlength===0?true:image.images.length < maxlength">
				<!-- <view class="imgfont icon-ziyuan zc_addImg"></view> -->
				<image :src="initBgImg" mode="aspectFit" style="width: 100%;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	
	export default {
		props: {
			image: Object,
			maxlength:{
				type:Number,
				default:0
			},
			isOne:{
				type:Boolean,
				default:false
			},
			isDisabled:{
				type:Boolean,
				default:false
			},
			isShowDel:{
				type:Boolean,
				default:true
			},
			initBgImg:{
				type:String
			},
			zcId:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				item:[]
			};
		},
		created() {
			_this = this;
			// console.log('=== ',_this.$props.image);
		},
		methods: {
			upImages(item,isDisabled) {		//图片上传方法
				if (isDisabled) {
					return;
				}
				// console.log('上传 = ',item);
				if (!item) {
					console.error('上传图片参数不能为空！')	
					return;
				}
				let count = 9;
				if (_this.$props.maxlength>0 && _this.$props.maxlength<=9) {
					count = _this.$props.maxlength;
				}
				
				uni.chooseImage({
					count:1,
					success(res) {
						let zcImage = JSON.parse(JSON.stringify(item));
						if (zcImage.id !== 8) {
							zcImage.images = [];
							zcImage.imgInfos = [];
						}
						console.log('上传',zcImage);
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let img = {
								url:res.tempFilePaths[i]
							}
							
							zcImage.images.push(img);
						}
						
						// 上传到服务器
						let WebSession = wx.getStorageSync(_this.$ZcPublic.KeySession);
						let upUrl = _this.$ZcPublic.Domain + 'UniService/doUploadService.ashx?xtype=upload';
						console.log('upUrl',upUrl);
						uni.uploadFile({
							url:upUrl,
							filePath:res.tempFilePaths[0],
							formData:{
								Name:'Uni_Upload',
								Action:'mpUpping',
								Data:{
									GB_OrganSN:'237CA873-8BB2-453E-900A-87BF324D5F75'
								}
							},
							name:'imgFile',
							success(res) {
								let imgData = JSON.parse(res.data)
								
								zcImage.imgInfos.push(JSON.parse(JSON.stringify(imgData.data)));
								uni.hideLoading();
								console.log('上传后1 = ',zcImage);
								_this.$emit('upImage',zcImage);
							},
							fail() {
								uni.hideLoading();
							}
						})
					},
					fail() {
						uni.hideLoading();
					}
				})
				
			},
			rmImages(index,id) {		//图片删除方法
				console.log('删除 = ',index+' -- '+id);
				
				uni.showModal({
					title: '温馨提示',
					content: '是否确认删除？',
					showCancel: true,
					success: res => {
						if (res.confirm) {
							let zcImg = {
								index:index,
								id:id
							}
							_this.$emit('rmImage',zcImg);
						}
					}
				});
			},
			pvImages(imgs,idx) {		//图片预览方法
				let imgLists = [];
				for (let i = 0; i < imgs.length; i++) {
					imgLists.push(imgs[i].url);
				}
				
				uni.previewImage({
					current: idx,
					urls:imgLists,
					success(res) {
						
					},
					fail(err) {
						uni.showModal({
							title: '温馨提示',
							content: '预览失败！',
							showCancel: false
						});
					}
				})
			}
		}
	}
</script>

<style>
	.card_img{padding: 0upx 1%;flex-wrap: wrap;padding-top: 10upx;}
	.card_img>view{flex-shrink: 0;margin: 0upx 1%;margin-top: 10upx;height: 0;overflow: hidden;position: relative;border: 1px solid #CCCCCC;box-sizing: border-box;background-color: #FFFFFF;}
	.card_img view image{width: 100%;position: absolute;height: 100%;}
	
	@font-face {
		font-family: 'imgfont';  /* project id 1144889 */
		src: url('//at.alicdn.com/t/font_1144889_7ui2xip9obv.ttf') format('truetype');
	}
	
	.imgfont {
	  font-family: "imgfont" !important;
	  font-size: 12px;
	  font-style: normal;
		position: relative;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-ziyuan:before {
	  content: "\e60d";
	  font-size: 40upx;
	  color: #CCCCCC;
	}
	.icon-unie6b4:before {
	  content: "\e675";
	  color: #FFFFFF;
	}
	
	.zc_addImg{
		width: 100%!important;
		height: 100%!important;
		/* border: 2upx solid #f5f5f5; */
		background-color: #FFFFFF;
		/* color: #F5F5F5; */
		display: flex;
		justify-content: center;
		align-items: center;
		/* box-sizing: border-box; */
		/* position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -81upx;
		margin-top: -81upx; */
	}
	
	.card_removeImg{
		position: absolute!important;top: 0px;right: 0px;color: #F5F5F5;background-color: rgba(80,80,80,.4);border: none!important;font-size: 30upx;padding: 0px 14px;margin: 0!important;border-radius: 0upx 0 0upx 10upx;
	}
</style>
